<template>
  <div class="work_group">
    <div class="chart_box">
      <div ref="myChart" class="chart_wrapper"></div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'WorkCenter',
  props: {
    dateValue: {
      type: Array
    }
  },
  components: {},
  data() {
    return {
      xData: [], // x轴
      completeQuantity: [], // 合格数
      wasteQuantity: [], // 不合格数
      quanlifiedRate: [], // 送检合格率
      listData: [], // 原始数据
      myChart: {}, // 初始化画布
    }
  },
  computed: {
    // 送检合格率
    passRate() {
      return this.listData.map(item => {
        let num = (item.completeQuantity / item.inputQuantity * 100)
        if (isNaN(num)) num = 0
        return num.toFixed(2)
      })
    },
  },
  mounted() {
    this.myChart = this.$echarts.init(this.$refs.myChart)
  },
  methods: {
    // 获取图表
    getChart(listData) {
      this.listData = listData
      this.listData.forEach(item => {
        this.xData.push(item.workcenterName || '')
        this.completeQuantity.push(item.completeQuantity || 0)
        this.wasteQuantity.push(item.wasteQuantity || 0)
        this.quanlifiedRate.push(item.quanlifiedRate || 0)
      })
      this.init()
    },
    // 初始化方法
    init() {
      // 设置图表滚动
      let dataZoom = [
        {
          type: 'slider',
          show: false,
          showDetail: false,
          start: 0,
          end: 100,
          bottom: 10,
          height: 16,
          // 手柄的样式
          handleStyle: {
            color: '#fff',
            borderWidth: 2,
            borderColor: '#a1b1c1'
          },
        }
      ]
      let max = 12
      if (this.listData.length >= max) {
        let end = Math.floor(max / this.listData.length * 100)
        dataZoom.forEach(item => {
          item.end = end
          item.show = true
        })
      }
      this.drawChart(dataZoom)
    },
    refresh() {
      // 延迟回调
      this.$nextTick(() => {
        this.init()
      })
    },
    // 绘制图表
    drawChart(dataZoom) {
      this.myChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {type: 'shadow'},
          padding: 10,
          textStyle: {
            fontSize: 12,
          },
          backgroundColor: 'rgba(0, 0, 0, 0.85)',
          formatter: (param) => {
            return param[0].name + '<br />' +
              param[0].marker + param[0].seriesName + ': ' + param[0].value + '<br />' +
              param[1].marker + param[1].seriesName + ': ' + param[1].value + '<br />' +
              param[2].marker + param[2].seriesName + ': ' + param[2].value + '%'
          }
        },
        dataZoom: dataZoom,
        grid: {
          left: '60',
          right: '60',
        },
        legend: {
          data: ['合格数', '不合格数', '送检合格率'],
          top: 10,
          itemWidth: 24,
          itemHeight: 10,
        },
        xAxis: [
          {
            type: 'category',
            data: this.xData,
            axisLine: {
              lineStyle: {
                color: '#dcdfe6',
                width: 2
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: 'rgba(0, 0, 0, 0.65)'
              }
            },
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '数量',
            // Y轴虚线
            splitLine: {
              lineStyle: {
                color: 'rgba(0, 0, 0, 0.1)',
                width: 1,
                type: 'dashed'
              }
            },
            // y轴轴线
            axisLine: {show: false},
            //y轴刻度线
            axisTick: {show: false},
          },
          {
            type: 'value',
            name: '合格率',
            min: 0,
            max: 100,
            splitLine: {
              'show': false,
              lineStyle: {
                color: '#333',
                width: 1,
                type: 'dashed',
              }
            },
            axisLine: {'show': false},
            axisTick: {'show': false},
            axisLabel: {formatter: '{value}%'}
          }
        ],
        series: [ // 数据
          {
            name: '合格数',
            type: 'bar',
            stack: '堆叠',
            data: this.completeQuantity,
            barCategoryGap: 80,
            barMaxWidth: 160,
            itemStyle: {
              normal: {
                color: '#1890ff',
                opacity: 0.85
              }
            }
          },
          {
            name: '不合格数',
            type: 'bar',
            stack: '堆叠',
            data: this.wasteQuantity,
            barMaxWidth: 160,
            itemStyle: {
              normal: {
                color: '#fbd438',
                opacity: 0.85
              }
            }
          },
          {
            name: '送检合格率',
            type: 'line',
            data: this.passRate,
            yAxisIndex: 1,
            label: {
              show: false,
              formatter: '{c}%',
              fontSize: 14
            },
            itemStyle: {
              normal: {
                color: '#f04864',
              }
            }
          },
        ]
      })
    },
  }
}
</script>

<style scoped lang="less">
  .work_group {
    .chart_box {
      .chart_wrapper {
        width: 100%;
        height: 580px;
        padding-top: 10px;
        box-sizing: border-box;
      }
    }
  }
</style>
